<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css" media="screen">
#content {
	width: 960px;
	margin: 5px auto;
}

#left {
	background: #FFF;
	height: auto;
	width: 690px;
	float: left;
}

#right {
	background: #FFF;
	height: auto;
	width: 260px;
	float: right;
}

.select {
	width: 150px;
}
</style>
<script type="text/javascript" src="../../js/jquery.min.js"></script>

<script type="text/javascript" src="../../js/highcharts.js"></script>

<script type="text/javascript" src="../../js/modules/exporting.js"></script>

<script type="text/javascript">
	var chart1;
	$(document)
			.ready(
					function() {
						chart1 = new Highcharts.Chart(
								{

									chart : {
										renderTo : 'container1',
										defaultSeriesType : 'column'
									},

									title : {
										text : '价格促销'
									},

									xAxis : {
										categories : [	'Product A', 
														'Product B', 
														'Product C', 
														'Product D', 
														'Product E',
														'Product F',
														'Product G',
														'Product H',
														'Product I' ],
										labels : {
											rotation : -45,
											align : 'right',
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									},

									yAxis : {
										allowDecimals : false,
										min : 0,
										title : {
											text : '%'
										}
									},

									tooltip : {
										formatter : function() {
											return '<b>' + this.x + '</b><br/>'
													+ this.series.name + ': '
													+ this.y + '<br/>'
													+ 'Total: '
													+ this.point.stackTotal;
										}
									},

									plotOptions : {
										column : {
											stacking : 'normal'
										}
									},

									series : [
											{
												name : '百分比',
												data : [ 30, 20, 40, 50, 60,
														20, 15, 30, 30],
												stack : '价格促销'
											}]
								});

					});
	
	
	
	var chart2;
	$(document)
			.ready(
					function() {
						chart2 = new Highcharts.Chart(
								{

									chart : {
										renderTo : 'container2',
										defaultSeriesType : 'column'
									},

									title : {
										text : '赠品促销'
									},

									xAxis : {
										categories : [	'Product A', 
														'Product B', 
														'Product C', 
														'Product D', 
														'Product E',
														'Product F',
														'Product G',
														'Product H',
														'Product I' ],
										labels : {
											rotation : -45,
											align : 'right',
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									},

									yAxis : {
										allowDecimals : false,
										min : 0,
										title : {
											text : '%'
										}
									},

									tooltip : {
										formatter : function() {
											return '<b>' + this.x + '</b><br/>'
													+ this.series.name + ': '
													+ this.y + '<br/>'
													+ 'Total: '
													+ this.point.stackTotal;
										}
									},

									plotOptions : {
										column : {
											stacking : 'normal'
										}
									},

									series : [
											{
												name : '百分比',
												data : [ 30, 20, 40, 50, 60,
														20, 15, 30, 30],
												stack : '价格促销'
											}]
								});

					});
	
	
	
	var chart3;
	$(document)
			.ready(
					function() {
						chart3 = new Highcharts.Chart(
								{

									chart : {
										renderTo : 'container3',
										defaultSeriesType : 'column'
									},

									title : {
										text : 'POSM'
									},

									xAxis : {
										categories : [	'堆头  A', 
														'单页  B', 
														'单页 C', 
														'单页 D'
														],
										labels : {
											rotation : -45,
											align : 'right',
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									},

									yAxis : {
										allowDecimals : false,
										min : 0,
										title : {
											text : '%'
										}
									},

									tooltip : {
										formatter : function() {
											return '<b>' + this.x + '</b><br/>'
													+ this.series.name + ': '
													+ this.y + '<br/>'
													+ 'Total: '
													+ this.point.stackTotal;
										}
									},

									plotOptions : {
										column : {
											stacking : 'normal'
										}
									},

									series : [
											{
												name : '百分比',
												data : [ 30, 20, 40, 50],
												stack : '价格促销'
											}]
								});

					});
	
	
	
	var chart4;
	$(document)
			.ready(
					function() {
						chart4 = new Highcharts.Chart(
								{

									chart : {
										renderTo : 'container4',
										defaultSeriesType : 'column'
									},

									title : {
										text : '导购'
									},

									xAxis : {
										categories : [	'导购'
														],
										labels : {
											rotation : -45,
											align : 'right',
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									},

									yAxis : {
										allowDecimals : false,
										min : 0,
										title : {
											text : '%'
										}
									},

									tooltip : {
										formatter : function() {
											return '<b>' + this.x + '</b><br/>'
													+ this.series.name + ': '
													+ this.y + '<br/>'
													+ 'Total: '
													+ this.point.stackTotal;
										}
									},

									plotOptions : {
										column : {
											stacking : 'normal'
										}
									},

									 series: [{
											name: '导购员',
											data: [20],
											stack: '导购'
										}, {
											name: '联系卡',
											data: [67.2],
											stack: '导购'
										}]
								});

					});
</script>


</head>

<body>

	<div align="center">

		<div
			style="width: 960px; height: 100px; background-image: url(../../images/title.png)">
		</div>

		<div align="left" style="width: 960px">
			<p>
				<a href="../../home.html">首页</a>&nbsp;&gt;&gt;&nbsp;促销
			</p>
		</div>
		<div id="content">
			<div id="left" align="center">
				<table width="686px" border="0">
					<tr>
						<td width="340px" align="center">
							<div id="container1"
								style="width: 338px; height: 400px; margin: 0 auto"></div>
						</td>
						<td align="center"><div id="container2"
								style="width: 338px; height: 400px; margin: 0 auto"></div></td>
					</tr>
					<tr>
						<td width="340px" align="center">
							<div id="container3"
								style="width: 338px; height: 400px; margin: 0 auto"></div>
						</td>
						<td align="center"><div id="container4"
								style="width: 338px; height: 400px; margin: 0 auto"></div></td>
					</tr>
				</table>


			</div>
			<div id="right" align="center">



				<table width="280" border="0" cellspacing="5">
					<tr>
						<td width="80" align="right">Month&nbsp;&nbsp;</td>
						<td width="181"><select name="Month" class="select">
								<option value="ALL">ALL</option>
								<option value="January" selected="selected">January</option>
								<option value="February">February</option>
								<option value="March">March</option>
								<option value="April">April</option>
						</select>
						</td>
					</tr>
					<tr>
						<td align="right">System&nbsp;&nbsp;</td>
						<td><select name="System" class="select">
								<option value="沃尔玛">沃尔玛</option>
								<option value="家乐福">家乐福</option>
								<option value="好又多">好又多</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">Region&nbsp;&nbsp;</td>
						<td><select name="Region" class="select">
								<option value="All">All</option>
								<option value="East">East</option>
								<option value="West">West</option>
								<option value="South">South</option>
								<option value="North">North</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">Area&nbsp;&nbsp;</td>
						<td><select name="Area" class="select">
								<option value="All">All</option>
								<option value="Shanghai">Shanghai</option>
								<option value="Beijing">Beijing</option>
								<option value="Anhui">Anhui</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">City&nbsp;&nbsp;</td>
						<td><select name="City" class="select">
								<option value="All">All</option>
								<option value="Shanghai">Shanghai</option>
								<option value="Beijing">Beijing</option>
								<option value="Wuhu">Wuhu</option>
						</select></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><map name="mymap">
								<area shape="rect" coords="95,3,153,22" href="promotion_ytd.html" />
								<area shape="rect" coords="2,1,65,21" href="promotion.html" />
							</map> <img src="../../images/BT_mtd_ytd.PNG" width="156" height="24"
							border="0" usemap="#mymap" />
						</td>
					</tr>
				</table>



			</div>
		</div>
	</div>
	</div>

</body>
</html>
